<template>
  <page class="index">
    <div class="content">
      <router-view></router-view>
    </div>
    <ul class="tabBar">
      <router-link tag="li" :to="{name:'movie'}" active-class="active">
        <span class="iconfont icon-yingpian"></span>
        影片
      </router-link>
      <router-link tag="li" :to="{name:'cinema'}" active-class="active">
        <span class="iconfont icon-yingyuanA"></span>
        影院
      </router-link>
      <li>
        <span class="iconfont icon-paihang-shouye"></span>
        票房
      </li>
      <li>
        <span class="iconfont icon-wode"></span>
        我的
      </li>
    </ul>
  </page>
</template>

<script>
export default {
  name: "index",
  created() {
      
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "../assets/css/comm.scss";
.index {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: scroll;
  }
}

.tabBar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 1.1rem;
  border-top: 1px solid black;
  > li {
    display: flex;
    flex-direction: column;
    width: 1rem;
    align-items: center;
    justify-content: space-around;
    font-size: 0.24rem;
    .iconfont {
      font-size: 0.64rem;
    }
    &.active{
        color: $primaryColor;
        .iconfont{
            color: $primaryColor;
        }
    }
  }
}
</style>